<template>
   <div>
      <div id="hearder">
       <router-link to='/personage'>
       <van-icon id="fanhui" name="arrow-left" />
       </router-link>
       <p id="ge">修改昵称</p>
     </div>
     <van-form @submit="onSubmit">
  <van-field
    v-model="iPhone"
    name="旧昵称"
    label="旧昵称"
    placeholder="旧昵称"
    :rules="[{ required: true, message: '昵称' }]"
  />
  <van-field
    v-model="iPhone"
    type="velue"
    name="新昵称"
    label="新昵称"
    placeholder="新昵称"
    :rules="[{ required: true, message: '新昵称' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">
      确定修改
    </van-button>
  </div>
</van-form>
   </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },
};
</script>

<style lang="scss" scoped>
#hearder{
  width: 100%;
  height: 100px;
  line-height: 100px;
  
}
#fanhui{
  font-size: 36px;
}
#ge{
  margin-left: 160px;
  margin-top: -120px;
}
</style>